Key

React의 특징 중 JSX를 활용하게 되면 React 내부 자바스크립트 코드에서 컴포넌트 배열을 생성해 간편하게 동적으로 렌더링할 수 있는 코드를 작성해 나갈 수 있다.

이러한 특징에서 React 라이브러리는 key라는 속성을 두어 렌더링 과정에서 번거로움, 성능 저하를 꾀하였다. key 속성을 기입하지 않는다고 해서 React 라이브러리 실행에서 에러를 일으키진 않지만 콘솔에서 경고 문구를 띄우는 등 성능적 방해요소로 작용할 수 있다. 따라서 key 속성을 사용하는 이유와 기입 팁을 간단하게 알아보자

Key 필요성

React 라이브러리에서는 다양한 상태들을 리스트로 관리하는 경우가 많다. 또 이러한 리스트 형태의 값들과 고차함수(map, filter 등)들을 이용해 컴포넌트 리스트를 작성하고 동적 렌더링에 이용한다.

const Todolist = (props) => {

  const todolist = props.todos.map(item => <li>{item}</li>)
    // 전달받은 todo list 상태값들을 컴포넌트 배열로 작성

  return (
    <>
      {todolist}
    </>
  )
}

export default Todolist

Key의 경우 이런 컴포넌트 리스트에서 어떤 컴포넌트 아이템이 수정, 추가, 삭제되었는지를 손쉽게 알아보기 위해서 필요한 속성이다.

위 코드를 실행할 경우 “Warning: Each child in a list should have a unique “key” prop.” 라는 경고 메세지가 나온다.

컴포넌트 배열의 각 요소들에 key 속성을 부여하라는 의미의 경고메세지이다.

여기서 key 속성을 부여할 필요성은 다음과 같다.

React의 경우 컴포넌트의 state값 혹은 부모 컴포넌트로부터 전달받은 props 상태값이 변경될 경우 리렌더링되는 구조를 가지고 있다. 컴포넌트 배열의 경우 배열의 처음부터 순차적으로 상태값을 비교해가며 리렌더링이 필요한 요소를 탐색하게 된다.

이러한 구조에서 컴포넌트 배열 끝에 요소가 추가되는 형태는 불필요한 렌더링없이 적절한 추가 과정이 이루어진다. 하지만 끝이 아닌 위치에 요소 추가, 삭제 등의 과정은 불필요한 요소까지 렌더링되는 성능저하가 유발된다.

이런 상황을 피하고 효과적인 리렌더링 파트를 탐색하기 위해 React는 key 속성을 활용하여 어느 요소가 변화가 일어났는지 더욱 빠르게 탐색해 나간다.

Key 속성으로 적절한 값은 ?

React의 렌더링 과정을 이해하면 Key 속성의 필요성을 어느정도 이해할 수 있다.

그렇다면 요소 배열에서 key 속성값을 사용하기 적당한 값은 무엇일까? 속성값을 결정하는데 어느정도의 규칙이 있을까?

먼저 React 도큐먼트 페이지에서는 Key 속성값으로 리스트 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것을 권장하고 있다. 대부분의 경우는 데이터의 ID 값을 key로 사용하는 것이 적절하다.

const Todolist = (props) => {

  const todolist = props.todos.map(item => <li key={item.id}>{item.content}</li>)

  return (
    <>
      {todolist}
    </>
  )
}

export default Todolist

Key 속성값으로 인덱스 값을 사용하는 것은 권장하지 않는다. 인덱스 값의 경우 앞에서 설명한 것처럼 배열 상에서의 위치가 변경될 수 있기 때문에 Key 값이 동적으로 변경되면서 동일한 성능 저하를 유발할 수 있기 때문이다.

Key 속성값은 형제 요소사이에서만 고유한 값이어야 한다.

• Key 속성값은 배열 안에서 형제 요소들 사이에 한해서 고유해야 한다. 즉, 전체 범위에서는 고유할 필요가 없다. 두개의 다른 요소 배열에서는 동일한 Key 를 사용할 수 있다.